<template>
    <div>
        <el-form  class="loginRoot">
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="user.loginname" auto-complete="off" placeholder="请输入用户名" clearable/>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="possword" v-model="user.loginpwd" auto-complete="off" placeholder="请输入密码" show-password/>
            </el-form-item>
            <el-button style="width: 100%;background-color:orange;" @click="login">登录</el-button>
        </el-form>
    </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  name: "loginpage",
  data() {
    return {
      user: {
        loginname: "admin",
        loginpwd: "123",
      },
    };
  },
  methods: {
    ...mapMutations(["setUser"]),

    login() {
      //AXIOS
      this.axios({
        method: "get",
        url: "Sign",
        params: this.user,
        data: {},
      })
        .then((res) => {
          //console.log('res: ', res);
          if (res.status == 200) {
            console.log("res.data: ", res.data);
            if (res.data.code > 0) {
              //登录成功后保存用户数据 包括 Token
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              sessionStorage.setItem('User',JSON.stringify(res.data.data));

              this.setUser(res.data.data);
              this.$router.push("/");
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
          }
        })
        .catch((err) => {
          console.log("err: ", err);
        });

      // sessionStorage.setItem('auth','jwt666');
      // this.$router.push('/student');
      // //不建议直接修改 state属性的值
      // //this.$store.state.username='zhangsan';
      // //
      // this.$store.commit('setUserName','里斯');
    },
  },
};
</script>

<style scoped>
table {
  margin: 0px auto;
  margin-bottom: 10px;
}
.loginRoot {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 200px auto;
        width: 350px;
        padding: 15px 35px;
        background: aliceblue;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #c6c6c6;
    }
    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505050;
    }
</style>